<script setup>
import { nextTick, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Message } from "@arco-design/web-vue";
import orgApi from "@/api/orgApi";

const submitForm = ref();
const searchForm = ref();
const searchModel = reactive({
    createUserId: "",
});
const visible = ref(false);
const orgTreeData = ref([]);
const loading = ref(false);

let submitData = ref({
    checkedKeys: [],
    halfCheckedKeys: []
});
const menus = ref([]);
let checkedKeys = ref([]);

let pagination = reactive({
    total: 0,
    current: 1,
    pageSize: 15,
    showPageSize: true,
    pageSizeOptions: [15, 25, 30, 50],
    showTotal: true,
    pageChange: (current) => {
        pagination.current = current;
        search(current, pagination.pageSize);
    },
    pageSizeChange(size) {
        pagination.pageSize = size;
        search(pagination.current, size);
    },
});

const columns = [
    {
        title: "组织名称",
        dataIndex: "name",
        width: 100,
    },
    {
        title: "类型",
        slotName: "type",
        width: 180,
    },
    {
        title: "操作",
        slotName: "action",
        fixed: "right",
        width: 200,
    },
];
const data = ref([]);

const showAddDialog = () => {
    visible.value = true;
    submitForm.value.resetFields();
};

const editRecord = (record) => {
    visible.value = true;
    nextTick(() => {
        submitForm.value.resetFields();
        submitData.value = Object.assign({}, record);
    });
};

const deleteRecord = (record) => {
    orgApi
        .delete({
            id: record.id,
        })
        .then((res) => {
            search();
            getOrgTree();
        });
};

const handleSubmitSuccess = (values, e) => {
    orgApi.save(values).then((res) => {
        visible.value = false;
        Message.success("保存成功");
        search();
        getOrgTree();
    });
};

const search = () => {
    loading.value = true;
    orgApi.list(searchModel).then((res) => {
        data.value = res;
        // pagination.total = res.total;
        loading.value = false;
    });
};

const getOrgTree = () => {
    orgApi.getTree().then((res) => {
        orgTreeData.value = res;
    });
};

const selectOrgNode = (keys) => {
    searchModel.parentId = keys[0];
    nextTick(() => {
        search();
    })
}

const refresh = () => {
    search();
};

const reset = () => {
    searchForm.value.resetFields();
};


getOrgTree();
search();
</script>

<template>
    <div class="main-con">
        <a-card>
            <a-form ref="searchForm" :model="searchModel" :label-col-props="{ span: 8 }"
                :wrapper-col-props="{ span: 16 }" label-align="left">
                <a-row :gutter="16">
                    <a-col :span="8">
                        <a-form-item field="name" label="组织名称">
                            <a-input v-model="searchModel.name" placeholder="请输入组织名称" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-space :size="18">
                            <a-button type="primary" @click="refresh">
                                <template #icon>
                                    <icon-search />
                                </template>
                                查询
                            </a-button>
                            <a-button @click="reset">
                                <template #icon>
                                    <icon-refresh />
                                </template>
                                重置
                            </a-button>
                        </a-space>
                    </a-col>
                </a-row>
            </a-form>
        </a-card>
        <a-card style="margin-top: 20px">
            <a-row :gutter="16">
                <a-col :span="5">
                    <a-card>
                        <div style="height: 700px;">
                            <a-tree :expanded-keys="['1']" :data="orgTreeData" @select="selectOrgNode"
                                :fieldNames="{ key: 'id', title: 'name' }"></a-tree>

                        </div>

                    </a-card>
                </a-col>
                <a-col :span="19">
                    <a-card>
                        <div class="toolbar">
                            <a-space>
                                <a-button type="primary" @click="showAddDialog">
                                    <template #icon>
                                        <icon-plus />
                                    </template>
                                    新增组织
                                </a-button>
                            </a-space>
                        </div>
                        <a-table :columns="columns" row-key="id" :loading="loading" :data="data" :pagination="false"
                            :bordered="false">
                            <template #type="{ record }">
                                {{ record.type == 'company' ? '公司' : record.type == 'dept' ? '部门' : '' }}
                            </template>
                            <template #action="{ record }">
                                <a-space>
                                    <a-button type="text" @click="editRecord(record)">编辑</a-button>
                                    <a-popconfirm content="确认要删除该数据吗？" @ok="deleteRecord(record)">
                                        <a-button type="text">删除</a-button>
                                    </a-popconfirm>
                                </a-space>
                            </template>
                        </a-table>
                    </a-card>
                </a-col>
            </a-row>
        </a-card>
    </div>
    <a-modal v-model:visible="visible" title="新增角色" width="700px" :footer="null">
        <a-form ref="submitForm" size="large" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
            :model="submitData" @submit-success="handleSubmitSuccess">
            <a-form-item field="parentId" label="上级组织" :rules="[{ required: true, message: '请选择上级组织' }]">
                <a-tree-select v-model="submitData.parentId" :data="orgTreeData"
                    :fieldNames="{ key: 'id', title: 'name' }" placeholder="请选择上级组织"></a-tree-select>
            </a-form-item>
            <a-form-item field="name" label="组织名称" :rules="[{ required: true, message: '请选择组织名称' }]">
                <a-input v-model="submitData.name" placeholder="请输入组织名称"></a-input>
            </a-form-item>
            <a-form-item field="name" label="类型" :rules="[{ required: true, message: '请选择类型' }]">
                <a-select v-model="submitData.type" placeholder="请选择分类">
                    <a-option value="company">公司</a-option>
                    <a-option value="dept">部门</a-option>
                </a-select>
            </a-form-item>
            <a-form-item>
                <a-space>
                    <a-button html-type="submit" type="primary">保存</a-button>
                    <a-button @click="() => {
                        visible = false;
                    }
                        ">取消</a-button>
                </a-space>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<style scoped></style>
